<template>
  <div class="mycom_warp">
    <header><slot name="header"></slot></header>
    <main>
      <!-- 通过slot标签属性传递数据到父组件中 到 -->
      <slot name="main" msg="hello vue"></slot>
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script>
export default {};
</script>

<style lang='scss' scoped>
.mycom_warp {
  header {
    min-height: 150px;
    background-color: lightpink;
  }
  main {
    min-height: 150px;
    background-color: lightcyan;
  }
  footer {
    min-height: 150px;
    background-color: lightgoldenrodyellow;
  }
}
</style>